<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Client2</title>
</head>

<body>
  <h1>Client2</h1>
  <h2 id="userInfo"></h2>
  <button id="doAuthorize">Do Authorize</button>
  <p>
    <a href="/login.html">Go To Login Page</a>
    <a href="http://localhost:8080/logout">Logout</a>
  </p>
  <div id="container" style="border: 1px solid red; height: 300px; overflow:scroll">
    <div id="innerData" style="border: 1px solid blue">
      <ul id="data"></ul>
    </div>
  </div>

  <script>
    tryGetToken()

    function tryGetToken() {
      let hash = location.hash
      const accessToken = mapValue(hash, 'access_token')
      console.log('access_token', accessToken)
      if (accessToken) {
        const jwt = parseJwt(accessToken)
        console.log('jwt', jwt)
        document.querySelector("#userInfo").innerHTML = jwt.user_name
      }
      // console.log('hash', hash)
    }

    function mapValue(input, key) {
      const reg = new RegExp(key + '=([a-zA-Z0-9\-\.]+)&?', 'g')
      const m = reg.exec(input)
      if (m) {
        return m[1]
      }
      return null
    }

    function parseJwt(token) {
      var base64Url = token.split('.')[1];
      var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
      var jsonPayload = decodeURIComponent(atob(base64).split('').map(function (c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
      }).join(''));

      return JSON.parse(jsonPayload);
    };

    const btnAuthorize = document.querySelector('#doAuthorize')
    btnAuthorize.addEventListener('click', function () {
      location.href =
        'http://localhost:8080/oauth/authorize?client_id=client2&response_type=token&redirect_uri=http://localhost:8082'
    })

    const containerObj = document.querySelector('#container')
    const innerObj = document.querySelector('#innerData')
    const dataObj = document.querySelector('#data')

    // console.log(innerObj.offsetHeight)
    loadDataAndAppend();

    containerObj.addEventListener('scroll', function () {
      const scrollTop = containerObj.scrollTop
      // console.log('scroll top', scrollTop + 10 + containerObj.offsetHeight, innerObj.offsetHeight)
      if (scrollTop + 10 + containerObj.offsetHeight >= innerObj.offsetHeight) {
        console.log('loading data')
        loadDataAndAppend()
      }

    })

    // var dataIndex = 1
    // var length = 20

    function loadDataAndAppend() {
      var start = data.children.length
      const fragment = document.createDocumentFragment()
      for (let i = 0; i < 20; i++) {
        // arr.push(`<li>Line${i}</li>`)
        const li = document.createElement('li')
        li.innerHTML = `Line ${start + i + 1}`
        fragment.appendChild(li)
      }
      dataObj.appendChild(fragment)
    }



    function getWindowHeight() {
      var windowHeight = 0;
      if (document.compatMode == "CSS1Compat") {
        windowHeight = document.documentElement.clientHeight;
      } else {
        windowHeight = document.body.clientHeight;
      }
      return windowHeight;
    }
  </script>
</body>

</html>